<template>
  <div class="comment_item_content">
    <div class="user_info">
      <div class="user_info_dec">
        <img
          :src="props.item?.avatar || noMoreAvatar(props.item?.commentby || '0')"
          alt=""
        />
        <div class="user_info_name">
          <span>{{ props.item.nickName }}</span>
          <Rate
            v-model="totalRate"
            allow-half
            class="mt05"
            color="#ffd21e"
            readonly
            size="12px"
            void-color="#dedede"
            void-icon="star"
          />
        </div>
      </div>
      <div class="user_info_time">{{ props.item.createTime }}</div>
    </div>
    <slot name="content" />
    <TextEllipsis
      :content="props.item.textComment"
      class="content_text"
      collapse-text="收起"
      expand-text="展开"
      rows="3"
    />
    <div class="comment_images mt05">
      <div
        v-for="(img, index) in showImages"
        :key="img"
        class="comment_images_item"
        @click="previewImg(index, images)"
      >
        <VanImage
          :data-index="index"
          :src="img"
          fit="cover"
          height="10.9rem"
          width="10.9rem"
        />
        <div v-if="index === 8 && images.length > 9" class="other_images">
          +{{ images.length - 9 }}
        </div>
      </div>
    </div>
    <slot name="foot"></slot>
  </div>
</template>

<script setup>
import Avatar from "@/assets/images/avatar.js";
import { Image as VanImage, Rate, showImagePreview, TextEllipsis } from "vant";
import { computed, defineProps } from "vue";

const props = defineProps(["item"]);

// 实际数量图片
const images = computed(() => {
  return props.item.pictureComment ? props.item.pictureComment.split(",^") : [];
});
// 展示图片
const showImages = computed(() => {
  return images.value.length > 9 ? images.value.slice(0, 9) : images.value;
});
// 综合评分
const totalRate = computed(() => {
  if (props.item.scoreAvg) return props.item.scoreAvg;
  let total = 0,
    length = 0;
  for (let i = 1; i < 6; i++) {
    let nub = props.item["score" + i + "Value"];
    if (nub !== 0) {
      total += nub;
      length++;
    }
  }
  if (!total) return 0;
  return (total / length).toFixed(2);
});
// 预览图片
const previewImg = (idx, list) => {
  showImagePreview({
    images: list,
    startPosition: idx
  });
};
// 获取默认头像
const noMoreAvatar = (str) => {
  let num = str.replace(/\D/g, "").substr(-1) || 0;
  return Avatar["pic" + num];
};
</script>

<style scoped>
.comment_item_content {
  padding: 1.2rem 1.5rem;
  margin-top: 0.8rem;
  background: #ffffff;
}

.user_info {
  display: flex;
  justify-content: space-between;
}

.user_info_dec {
  display: flex;
  align-items: center;
}

.user_info_dec img {
  width: 3.6rem;
  height: 3.6rem;
  object-fit: cover;
  border-radius: 50%;
}

.user_info_name {
  padding-left: 0.8rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  color: #666666;
}

.comment_images {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.8rem;
}

.comment_images .comment_images_item {
  margin-right: 0.8rem;
  margin-top: 0.8rem;
  border-radius: 0.4rem;
  width: 10.9rem;
  height: 10.9rem;
  overflow: hidden;
  position: relative;
}

.other_images {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--van-white);
}

.user_info_time {
  font-size: 1.3rem;
  color: #666666;
}

.content_text {
  margin-top: 0.8rem;
  color: #111111;
}
</style>
